<template>
  <el-row>
      <el-col :span="8">
          <!-- user卡片 -->
       

          <!-- echarts图表 -->
          <div class="card-chart" style="margin-left:20px">
              <!-- 折线图 -->
              <el-card style="height:280px">
                  <div ref="echarts1" style="height:280px"></div>
              </el-card>
              <div class="graph">
                  <!-- 柱状图 -->
                  <el-card style="height:280px">
                      <div ref="echarts2" style="height:280px"></div>
                  </el-card>
                  <!-- 饼状图 -->
                  <el-card style="height:320px">
                      <div ref="echarts3" style="height:320px"></div>
                  </el-card>
              </div>
          </div>
      </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';
// import TableData from '@/data/mockData/tableData';

export default {
  data() {
      return {
          // TableData: TableData,
          // TableLabel: TableLabel,
          // CountData: CountData,

          // 模拟折线图数据
          lineChartData: {
              legend: { data: ["销售额", "订单量"] },
              xAxis: { data: ["1月", "2月", "3月", "4月", "5月", "6月"] },
              yAxis: {},
              series: [
                  {
                      name: "销售额",
                      type: "line",
                      data: [120, 200, 150, 80, 70, 110],
                  },
                  {
                      name: "订单量",
                      type: "line",
                      data: [80, 150, 100, 60, 50, 90],
                  },
              ],
          },

          // 模拟柱状图数据
          barChartData: {
              xAxis: { data: ["周一", "周二", "周三", "周四", "周五"] },
              yAxis: {},
              series: [
                  {
                      name: "新增用户",
                      type: "bar",
                      data: [120, 200, 150, 80, 70],
                  },
                  {
                      name: "活跃用户",
                      type: "bar",
                      data: [80, 150, 100, 60, 50],
                  },
              ],
          },

          // 模拟饼状图数据
          pieChartData: {
              series: [
                  {
                      type: "pie",
                      radius: "50%",
                      data: [
                          { value: 1048, name: "搜索引擎" },
                          { value: 735, name: "直接访问" },
                          { value: 580, name: "邮件营销" },
                          { value: 484, name: "联盟广告" },
                          { value: 300, name: "视频广告" },
                      ],
                  },
              ],
          },
      };
  },
  methods: {
      priceFormate(price) {
          return "￥" + price;
      },
  },
  mounted() {
      // 初始化折线图

      const echarts1 = echarts.init(this.$refs.echarts1);
      echarts1.setOption(this.lineChartData);

      // 初始化柱状图
      const echarts2 = echarts.init(this.$refs.echarts2);
      echarts2.setOption(this.barChartData);

      // 初始化饼状图
      const echarts3 = echarts.init(this.$refs.echarts3);
      echarts3.setOption(this.pieChartData);
  },
};
</script>

// <style lang="less" scoped>
// .user {
//   display: flex;
//   align-items: center;
//   margin-bottom: 20px;
//   padding-bottom: 20px;
//   border-bottom: 1px solid #ccc;

//   img {
//       width: 150px;
//       height: 150px;
//       border-radius: 50%;
//       margin-right: 40px;
//   }

//   .userInfo {
//       .name {
//           font-size: 32px;
//           margin-bottom: 10px;
//       }

//       .access {
//           color: #999999;
//       }
//   }
// }

// .loginInfo {
//   p {
//       line-height: 28px;
//       font-size: 14px;
//       color: #999999;

//       span {
//           color: #666666;
//           margin-left: 60px;
//       }
//   }
// }

// .num {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between;
//   margin-left: 20px;

//   .el-card {
//       width: 32%;
//       margin-bottom: 20px;

//       .icon {
//           width: 80px;
//           height: 80px;
//           line-height: 80px;
//           text-align: center;
//           font-size: 30px;
//           color: #fff;
//       }

//       .details {
//           display: flex;
//           flex-direction: column;
//           justify-content: center;
//           margin-left: 15px;

//           .price {
//               font-size: 30px;
//               margin-bottom: 10px;
//               line-height: 30px;
//               height: 30px;
//           }

//           .desc {
//               font-size: 14px;
//               color: #999;
//               text-align: center;
//           }
//       }
//   }
// }

// .graph {
//   display: flex;
//   justify-content: space-between;
//   margin-top: 20px;

//   .el-card {
//       width: 49%;
//   }
// }
// </style>